<template>
  <div class="banner">
    <div class="inner-content">
      <div class="search-input">
        <SearchInput :Style="{ width: '650px', height: '45px' }"></SearchInput>
      </div>
      <div class="look">
        <div class="all-match">
          <p>查看全部竞赛</p>
        </div>
        <p class="margin">/</p>
        <div class="all-activity">
          <p>查看全部活动</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import SearchInput from "./Search-input.vue";
</script>

<style lang="scss" scoped>
.banner {
  position: relative;
  width: 100%;
  height: 350px;
  background: url("https://cdn3.saikr.com/img/newindex/banner_pic@2x.png") no-repeat center;
  background-size: cover;
  .inner-content {
    width: 1036px;
    margin: 0 auto;
    padding-top: 216px;
    .look {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      > div {
        transition: color 0.1s ease-in;
        color: #666666;
        padding-bottom: 1px;
        text-decoration: underline;
        @include Hover;
      }
      .margin {
        margin: 0 10px;
        font-size: 20px;
        color: #666666;
      }
    }
  }
}
</style>
